const path = require('path')
const webpack = require('webpack')
const htmlWebpackPlugin = require('html-webpack-plugin') //在内存中自动生成页面的插件
const VueLoaderPlugin = require('vue-loader/lib/plugin.js') //webpack 4.* 版本，如果使用vue-loader，需要配置VueLoaderPlugin
    //module.exports 是node语法 向外暴露一个成员
module.exports = {
    entry: path.join(__dirname, './src/index.js'),
    output: {
        path: path.join(__dirname, './dist'),
        filename: 'main.js'
    },
    devServer: {
        //配置 webpack-dev-server相关到指令参数
        open: true,
        port: 3000,
        contentBase: 'src',
        hot: true

    },
    plugins: [
        //插件节点
        //创建一个热更新插件
        new webpack.HotModuleReplacementPlugin(),
        new htmlWebpackPlugin({ //在内存中生成html页面的插件
            template: path.join(__dirname, './src/index.html'), //指定要根据哪个页面在内存中生成页面
            filename: 'index.html' //指定内存中生成的页面名称
        }),
        new VueLoaderPlugin() //在webpack 4.0版本，需要配置 VueLoaderPlugin
    ],
    module: {
        //所有 webpack 处理不了到文件类型，都需要在 module  节点中配置，加载解析规则
        rules: [
            { test: /\.css$/, use: ['style-loader', 'css-loader'] }, //配置处理 css文件的规则
            { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }, //配置处理 less文件的规则
            { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }, //配置处理 scss文件的规则
            { test: /\.(png|jpg|jpeg|gif|bmp)$/, use: ['url-loader?limit=355422&name=[hash:8]-[name].[ext]'] }, //配置处理 图片文件的规则
            //limit 设置图片到大小，单位是字节，byte,如果图片小与给定的值，才会转为 base64 , 否则，直接在页面中引用图片路径
            { test: /\.(woff|woff2|eot|svg|ttf)$/, use: ['url-loader'] }, //配置处理 字体图标的规则
            { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }, //配置转换高级js语法的loader，注意：必须要添加 exclude 排除项 exclude:/node_modules/
            { test: /\.vue$/, use: 'vue-loader' } //配置处理.vue到配置文件

        ]
    }

}